<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#FFFFFF" back-icon-color="#FFF"
			:is-fixed="isFixed" :is-back="isBack" 
			:background="background" 
			:back-text-style="{color: '#FFF'}" :title="title" 
			:back-icon-name="backIconName" :back-text="backText"
		>
			<view class="slot-wrap" v-if="useSlot">
				<view class="navbar-right">
					<view class="message-box right-item" @click="AddBtn">
						<u-icon name="plus" color="#ffffff" size="38"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="content">
			<view v-for="(item, index) in taskList" :key="index">
				<u-card :title="item.shipname" thumb="/static/img/chuan1.png" :sub-title="item.carnum<=0?'未派车':(item.carnum>item.checknum)?'派车未审核':'已安排车辆'">
						<view class="" slot="body">
							<view class="info-row">
								<view class="item left">货种：{{item.cargo}}</view>
								<view class="item right">作业方式：{{item.workmodel}}</view>
							</view>
							<view class="info-row">
								<view class="item left">件数：{{item.number}}</view>
								<view class="item right">吨位：{{item.tonnage}}</view>
							</view>
							<view class="info-row">
								<view class="item">派工日期：{{item.realbegindate|dateFormat('yyyy-MM-dd')}}</view>
							</view>
							<view class="info-row">
								<view class="item">提货单位：{{item.shipper}}</view>
							</view>
							<view class="info-row">
								<view class="item">车队：{{item.memo||''}}</view>
							</view>
						</view>
						<view class="" slot="foot"><u-icon name="car-fill" size="34" color="" :label="asPort?'审核安排车辆':'点击安排车辆'" @tap="manageCar(item)"></u-icon></view>
					</u-card>
			</view>
			<u-loadmore :status="status" :loadText="loadText"
			:icon-type="iconType" :is-dot="isDot" @loadmore="loadmore"/>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import {mapState } from 'vuex'
	
	export default {
		data() {
			return {
				status: 'loadmore',
				iconType: 'circle',
				isDot: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
				title: '车辆指派',
				backText: null,
				backIconName: 'nav-back',
				useSlot: false,
				background: {
					backgroundColor: '#2979ff',
				},
				isBack: true,
				custom: true,
				isFixed: true,
				taskList: [],
				page: 0,
				rows: 10
			}
		},
		computed: {
			...mapState(['activePort', 'userInfo', 'roleArr']),
			listUrl () {
				switch (this.activePort) {
					case 'htg':
						return this.$httpApi.htgPortUrl.getWorkorderListM
						break
					default:
						return ''
				}
			},
			asPort () { // 是否未港方
				return this.roleArr.indexOf('港口') > -1
			},
			asLogis () { // 是否未物流
				return this.roleArr.indexOf('物流公司') > -1
			}
		},
		methods: {
			manageCar (item) {
				if (this.userInfo.status != 1) {
					this.$refs.uToast.show({
						title: '您的账号未激活',
						type: 'warning'
					})
					return
				}
				this.$u.route({
					url: '/pages/carManage/manageCar',
					params: {
						renwuid: item.dayworkplanid,
						station: item.station,
						taskid: item.id
					}
				})
			},
			loadmore() {
				if (!this.listUrl) {
					return
				}
				if (this.status == 'loadmore') {
					this.status = 'loading'
					this.page += 1
					this.$http.request(this.listUrl, {
						page: this.page,
						rows: this.rows,
						carTeam: this.asPort?'':this.userInfo.teamName==''?'没有队伍信息':this.userInfo.teamName
					})
					.then(res => {
						this.taskList = this.taskList.concat(res.rows)
						if (res.rows.length < this.rows) {
							this.status = 'nomore'
						} else {
							this.$nextTick(() => {
								this.status = 'loadmore'
							})
						}
					})
				}
			}
		},
		onLoad () {
			this.loadmore()
		},
		onReachBottom() {
			this.loadmore()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}
	
	.wrap {
		padding: 24rpx;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		margin-left: auto;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.message-box {
		
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		color: #fff;
		font-size: 30rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	.content {
		padding: 40upx 20upx 0;
	}
	
	.info-row {
		padding: 10upx 0;
		display: flex;
		align-items: center;
		// border-bottom: 1px dotted #d8d8d8;
		.item {
			flex: 1;
		}
		.left {
			text-align: left;
		}
		.right {
			text-align: right;
		}
	}
</style>
